<template>
	<page  ref='page' top='100rpx'>
		<!-- 建材城 wwl-->
		<view class="page">
			<view :class="isTop ? '' :'tabber1'" class="tabber">
				<view class="tabber_box">
					<view class="tabber_box_flex" :style="{ height: `${getters.statusBarHeight}px` }"></view>
				</view>
				<view class="tabber_box_title_flex" :style="{ top: `${getters.statusBarHeight}px` }">
					<view class="text">
						建材城
					</view>
				</view>
			</view>
			<!-- 20220111 暂时去掉 -->
			<!-- <view class="address_box" @click="getLocation()" >
				<view class="city">
					{{getters.currentArea ? getters.currentArea.cityName : '请设置区域'}}
				</view>
				<image src="../static/img/orientation1.png" mode="" class="img"></image>
			</view> -->
			<view class="banner_box" v-if="bannerList && bannerList.length > 0">
				<swiper class="banner" @change='intervalChange' circular autoplay interval="4000" duration="1000"
					indicator-active-color='#d5d5d5' indicator-color='#999'>
					<swiper-item v-for="(item,index) in bannerList" :key='index' @click="$global.$swiperPage(item)">
						<view class="swiper_item">
							<image :src="item.pic_url" mode="scaleToFill" :data-index="index" class="image"></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="swiper_option" >
					<text v-for="(items,indexs) in bannerList" :key="indexs"  :class="bannerActive == indexs ?  'active_icon' :''" class="icon">
					</text>
				</view>
			</view>
			<!-- 广告位 -->
			<!-- <view class="quick_box1" >
				<image src="" mode="scaleToFill"></image>
			</view> -->
			<view class="quick_box" v-if='quickList && quickList.length > 0'>
				<view class="row" v-for='(item,index) in quickList' :key='index' @click="onTypePage(item.name,item.id)">
					<image :src="item.avatar" mode="scaleToFill"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
			
			<!-- 品牌馆 -->
			<view class="xiazx" v-if="pinpai_status == 1">
				<view class="row" >
					<span class="left">品牌馆</span>
					<!-- <span class="right" @click="">查看更多</span> -->
				</view>
				<view class="imgssname" >
					<view class="example-body">
						<view class="tag-view">
							热销品牌
						</view>
						<view class="tag-view">
							知名品牌
						</view>
						<view class="tag-view">
							人气品牌
						</view>
					</view>
					<view class="banner" >
						
					</view>
					
					<!-- <swiper class="banner" circular interval="3000" duration="1000" easing-function="linear" indicator-active-color='#d5d5d5' indicator-color='#999' next-margin="135rpx" >
						<swiper-item class="bann2" v-for="(item,index) in craftsmanshoption.list" :key='index' >
							<view class="item kong"  v-for="(item1,index1) in item" :key="index1"  @click="onShop(item1,2)">
								<image :src="item1.cover" class="imgtil" mode="scaleToFill"></image>
								<span class="goods_name">{{item1.name}}</span>
								<view class="jingyan" >
									<span class="congy">{{item1.year_num}}</span>
									<span >
										<image src="../../static/image/icon/shoucang.png" mode="scaleToFill" class="dianzanimg"></image>
									</span>
									<span class="dianzan">{{item1.like}}</span>
								</view>
							</view>
							
						</swiper-item>
					</swiper> -->
					
				</view>
			</view>
			
			
			<view class="classification_box">
				<view class="tab_row2">
					<tabRow2  ref='tabs' :tabList='tabList' type='2' @change='changeTabs' />
				</view>
				<!-- 建材城商城商品 -->
				<scroll-view  style='height:100%' enableBackToTop="true" scroll-y="true" @scrolltolower="loadMore" v-if='tabActive == 0 && total != 0' >
					<view class="list_box">
						<block  v-if='total != 0'>
							<renovationShop v-for='(row,index) in list' :key='index' :row='row' status='shop' type='buildingMaterialsCity' :duihuan='0' :offer='offer'/>
							<loadingText :type="loading || page * size < total" />
						</block>
						
					</view>
				</scroll-view>
				
				<view class="list_box" v-if='total != 0 && tabActive > 0' >
					<renovation-row :list='classificationList' status='shop'  :page='page' :size='size' :duihuan='duihuan' :type=' tabActive == 1 ? "decorationMoneyExchange" :"marketingCampaign"'/>
					<loadingText :type="loading || page * size < total" />
				</view>
				<empty  :status='2' v-else-if='total == 0 && !loading  && tabActive > 0'/>
			</view>
			<foot/>
			<!-- <tabbar ref='tabbar' active='2'/> -->
		</view>
	</page>
</template>

<script>
	import  { getbuildingMaterialsCityType,getHomeCarousel,getbuildingMaterialsCitysGoodsList,getCityName } from "@/utils/getRequest.js"
	import {getJCCGoodsNav,getJCCGoodsList,getlabelshopList,getDGGoodsList,getShopList} from "../static/api.js"
	import tabRow2 from '@/components/tab-row2.vue'
	import renovationRow from '@/components/renovation-row.vue'
	import tabbar from '@/components/tabbar.vue'
	import  renovationShop  from "@/components/renovation-shop.vue"
	export default {
		components:{tabbar,tabRow2,renovationRow,renovationShop},
		data(){
			return{
				isTop:false,
				bannerActive: 0,
				bannerList: [],
				quickList:[],
				tabList:[],
				tabActive:1,
				classificationList:[],
				classificationLists:[],
				page:1,
				size: 10,
				total:0,
				// currentArea:null,
				loading:false,
				list:[],
				
				pinpai_status:0,
				
				pinpai_list:[],
				fucai_list:[],
				pinpai_page:1,
				pinpai_size: 10,
				pinpai_total:0,
				
				offer:'',
				duihuan:1,//为1不让加入精算单
			}
		},
		onPullDownRefresh(){
			this.page = 1
			this.getQuickList()
			this.onGetBannerList()
		},
		onReachBottom(){
			if(this.page * this.size >= this.total || this.loading) return
			this.page ++
			this.getClassificationList()
		},
		watch: {
			currentAddress(x) {
				this.page = 1
				this.getClassificationList()
			}
		},
		onPageScroll(res) {
			this.isTop = res.scrollTop > 300 ? true :false
		},
		methods:{
			citySelete() {
				uni.navigateTo({
					url: '/pagesHome/city'
				});
			},
			onTypePage(name,id){
				console.log(name,id,'-----------------------');
				uni.navigateTo({
					url:`/pagesCommodity/classification?type=${id}&typeName=${encodeURIComponent(name)}&jiacan=1`
				})
			},
			async getQuickList(){
				uni.showLoading()
				this.loading = true
				try{
					var res = await getbuildingMaterialsCityType()
					this.quickList = res
				}catch{
					uni.hideLoading()
					this.loading = false
				}
			},
			onSwiperDetail(id){
				if(!id) return
				uni.navigateTo({
					url: '/pagesHome/richTextDetails?id=' + id + '&type=swiperDetail' 
				})
			},
			changeTabs(c){
				this.tabActive = c
				this.page = 1
				if(c == 0){
					this.getList()
				}else{
					this.getClassificationList()
				}
			    
			},
			intervalChange(e) {
				this.bannerActive = e.detail.current
			},
			async onGetBannerList() {
				try{
					var res = await getHomeCarousel({status:2,zone_id:this.$store.state.currentArea ? this.$store.state.currentArea.cityId : ''})
					this.bannerList = res
					this.getTabList()
				}catch{}
			},
			async getTabList(){
				try{
					var res = await getJCCGoodsNav()
					console.log(res,'分类');
					// res.unshift(["id":0,"name":'建材城']);
					
					this.tabList = res
					this.$refs.tabs.active = 0
					this.changeTabs(0)
				}catch{}
			},
			async getList(){
					this.loading = true;
					if(this.page == 1) uni.showLoading() 
					
					// if(this.jiacan){						
					// 		var res = await getShopList({
					// 			type:this.jiacan,
					// 			page:this.page,limit:this.size,
					// 			build_city_nav_id:this.type,
					// 			build_city_id:this.tabActive,
					// 			title:this.title,
					// 			zone_id:this.$store.state.currentArea ? this.$store.state.currentArea.cityId : '',
					// 			user_id: this.offer == 2  && this.$store.state.chat_to ? this.$store.state.chat_to.id : ''
					// 		})
					// }else{
							var res = await getShopList({
								jiancai:1,
								page:this.page,limit:this.size,
								// build_city_nav_id:this.tabActive,
								// build_city_id:this.type,
								// title:this.title,
								zone_id:this.$store.state.currentArea ? this.$store.state.currentArea.cityId : '',
								user_id: this.offer == 2  && this.$store.state.chat_to ? this.$store.state.chat_to.id : ''
							})
					// }
					this.list =  this.page == 1 ? res.list : [...this.list,...res.list],
					console.log(this.list, '商品列表');
					this.total = res.count
					this.loading = false
					
					if(res.shopcount < 1){
						uni.showToast({title:'您的档案地址服务商家不足1个，已为您展示其他服务商家',icon:'none',duration:2000})
					}
					
					if(this.page == 1) uni.hideLoading() 
				
			},
			//获取品牌馆跟辅材馆店铺跟商品
			async getlabelshopList(){
					this.loading = true;
					if(this.pinpai_page == 1) uni.showLoading() 
					
					var res = await getlabelshopList({
						shop_label:1,
						page:this.pinpai_page,limit:this.pinpai_size,
						zone_id:this.$store.state.currentArea ? this.$store.state.currentArea.cityId : ''
					})
					
					this.pinpai_list =  this.pinpai_page == 1 ? res.list : [...this.pinpai_list,...res.list],
					console.log(this.pinpai_list, '品牌馆');
					
					var res2 = await getlabelshopList({
						shop_label:2,
						page:this.pinpai_page,limit:this.pinpai_size,
						zone_id:this.$store.state.currentArea ? this.$store.state.currentArea.cityId : ''
					})
					
					this.fucai_list =  this.pinpai_page == 1 ? res2.list : [...this.fucai_list,...res2.list],
					console.log(this.fucai_list, '辅材馆');
					
					this.pinpai_total = res.count
					this.loading = false
					
					// if(res.shopcount < 1){
					// 	uni.showToast({title:'您的档案地址服务商家不足1个，已为您展示其他服务商家',icon:'none',duration:2000})
					// }
					
					if(this.pinpai_page == 1) uni.hideLoading() 
				
			},
			async getClassificationList(){
				if(this.page == 1)  uni.showLoading()
				this.loading = true
				try{
					if(this.tabActive == 0){
						this.getList()
					}else if(this.tabActive == 1){
						var res = await getDGGoodsList({page:this.page,limit:this.size,jiancai:1,zone_id:this.$store.state.currentArea ? this.$store.state.currentArea.cityId : ''})
						
						
						// var listduih = res.listduihuan;
						// if(listduih){
						// 	listduih.forEach((v,vi)=>{
						// 		console.log(v,'兑换前12');console.log(vi,'兑换前133');
						// 	})
							
						// 	var ress = listduih.map(function (item,index,ary ) { 
								
						// 		console.log(item,'兑换前11');console.log(index,'兑换前212');console.log(ary,'兑换前145');
						// 		var shuzu = [];
						// 		if(item.goods.length > 0){
									
						// 		}
						// 	    return item*10; 
						// 	});
							
							this.classificationLists  = this.page == 1 ?  res.listduihuan : [...this.classificationLists,...res.listduihuan],
							
							console.log(res,'兑换前');
						// }
						
					}else{
						var res = await getJCCGoodsList({page:this.page,limit:this.size,zone_id:this.$store.state.currentArea ? this.$store.state.currentArea.cityId : '',type:this.tabActive})
					}
					this.classificationList  = this.page == 1 ?  res.list : [...this.classificationList,...res.list],
					
					
					
					
					this.total = res.count
					this.loading = false
					
					if(this.page == 1)  uni.hideLoading()
					uni.stopPullDownRefresh()
				}catch{
					uni.hideLoading()
					this.loading = false
					uni.stopPullDownRefresh()
				}
			},
			
		// 	getLocation(){
		// 		return
		// 		if(this.$store.state.currentArea){
		// 			uni.showToast({title:'请更改默认房屋档案',icon:'none'})
		// 			return
		// 		}
		// 		if(this.$store.state.userInfo){
		// 			return  uni.showToast({title:'请设置房屋档案',icon:'none'})
		// 		}
		// 		// #ifdef APP-PLUS 
		// 			uni.showToast({title:'请去设置里打开位置权限',icon:'none'})
		// 			return
		// 		// #endif
		// 		uni.getLocation({
		// 				type: 'wgs84',
		// 				success: res => {
		// 					getCityName
		// 						({longitude: res.longitude,latitude: res.latitude})
		// 						.then(
		// 							res2 => {
		// 								if(this.$store.state.isOpenSetting == 1)uni.showToast({
		// 									title: '授权成功',icon:'none'
		// 								})
		// 								res.cityInfo =res2
		// 								res.cityId =res2.id
		// 								res.cityName =res2.name
		// 								this.$store.commit('setCurrentArea',res)
		// 								this.$store.commit('setIsOpenSetting',2)
		// 								this.page = 1
		// 								this.getClassificationList()
		// 							})
		// 						.catch(() => {})
		// 				},
		// 				fail: err => {
		// 					// #ifdef APP-PLUS
		// 						uni.showToast({title:'请去设置里打开位置权限',icon:'none'})
		// 						return
		// 					// #endif
		// 					// #ifdef MP-WEIXIN
		// 					uni.getSetting({
		// 							success: res => {
		// 								var statu = res.authSetting;
		// 								if (!res.authSetting['scope.userLocation']) {
		// 									wx.showModal({
		// 										title: '是否授权当前位置',
		// 										content: '需要获取您的地理位置，仅在获取商品、店铺、等信息时使用，不做其他用途。',
		// 										fail:()=>{
		// 											this.$store.commit('setIsOpenSetting',2)
		// 											this.$store.commit('setIsOpenSettingshow',new Date().getTime())
		// 										},
		// 										success: (tip) => {
		// 											if (tip.confirm) {
		// 												this.$store.commit('setIsOpenSetting', 1)
		// 												wx.openSetting({
		// 													success: (data) => {
		// 														if (data.authSetting["scope.userLocation"] === true) {
		// 															uni.getLocation({
		// 																type: 'wgs84',
		// 																success: res => {
		// 																	getCityName
		// 																		({longitude: res.longitude,latitude: res.latitude})
		// 																		.then(
		// 																			res2 => {
		// 																				uni.showToast({
		// 																					title: '授权成功',icon:'none'
		// 																				})
		// 																				res.cityInfo =res2
		// 																				res.cityId =res2.id
		// 																				res.cityName =res2.name
		// 																				this.$store.commit('setCurrentArea',res)
		// 																				this.$store.commit('setIsOpenSetting',2)
		// 																				this.$store.commit('setIsOpenSettingshow',new Date().getTime())
		// 																			})
		// 																		.catch(() => {})
		// 																},
		// 																fail: err => {
		// 																	this.$store.commit('setIsOpenSetting',2)
		// 																	this.$store.commit('setIsOpenSettingshow',new Date().getTime())
		// 																}
		// 															})
		// 														} else {
		// 															wx.showToast({
		// 																title: '授权失败',icon:'none',duration: 1000
		// 															})
		// 															this.$store.commit('setIsOpenSetting',2)
		// 															this.$store.commit('setIsOpenSettingshow',new Date().getTime())
		// 														}
		// 													}
		// 												})
		// 											}else{
		// 												this.$store.commit('setIsOpenSetting',2)
		// 												this.$store.commit('setIsOpenSettingshow',new Date().getTime())
		// 											}
		// 										}
		// 									})
		// 								}
		// 							},
		// 							fail: function(res) {
		// 								this.$store.commit('setIsOpenSetting',2)
		// 								this.$store.commit('setIsOpenSettingshow',new Date().getTime())
		// 								wx.showToast({
		// 									title: '授权失败',
		// 									icon: 'none',
		// 									duration: 1000
		// 								})
		// 							}
		// 						})
		// 					// #endif
		// 				}
							
		// 			})
					
		// 	}
		
		},
		
		onLoad(params){
			console.log(this.duihuan,'兑换2');
			this.getQuickList()
			this.onGetBannerList()
			this.getlabelshopList()
			
		}
	}
</script>

<style lang="scss" scoped>
	.xiazx{
		padding: 10px 16px;
		.row{
			border-top: 1px solid #dcdcdc;
			padding: 10px 0px;
			.left{
				width: 50%;
				text-align: left;
				font-size: 16px;
				font-weight: 600;
				display: inline-block;
			}.right{
				width: 50%;
				text-align: right;
				font-size: 12px;
				line-height: 18px;
				display: inline-block;
			}
		}
		.imgssname{
			.banner{
				width: 100%;
				height: 420rpx;
				
			}
			.bann2{
				display: flex;
				    justify-content: space-between;
			}
			.kong{
				// margin-right: 20rpx;
			}
			.item{
				width: 262rpx;
				// display: inline-block;
				margin-top: 10rpx;
				margin-left: 10rpx;
				margin-right: 10rpx;
				// flex: 1;
				
			}
			.goods_name{
				font-size: 24rpx;
				white-space: nowrap;
				text-overflow:ellipsis;
				overflow:hidden;
				display: block;
			}
			.jingyan{
				line-height: 12px;
				font-size: 20rpx;
				display: flex;
				justify-content: space-between;
				.congy{
					white-space: nowrap;
					text-overflow:ellipsis;
					overflow:hidden;
					display: inline-block;
					width: 154rpx;
					
				}
				.dianzan{
					
				}
				.dianzanimg{
					width: 20rpx;
					height: 20rpx;
				}
			}
			.imgtil{
				width: 100%;
				height: 330rpx;
				border-radius: 10px;
				box-shadow: 0px 1px 5px #4a4a4a;
			}
		}
	}
	
	.address_box{
		position: fixed;
		z-index: 99;
		left: 36rpx;
		top: 60px;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 28px;
		background-color: rgba(0,0,0,0.5);
		.city {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: left;
			color: #ffffff;
			max-width: 300rpx;
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
			word-break: break-all;
		}
		image {
			width: 24rpx;
			height: 24rpx;
			margin-left: 8rpx;
		}
	}
	.tabber{
		transition: all 0.8s;
	}
	.tabber1{
		opacity: 0;
	}
	.tabber_box .tabber_box_flex {
		width: 100%;
		background-color: #fff;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
	}
	.tabber_box_title_flex {
		background-color: #fff;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 99999;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 42rpx;
		text-align: center;
		color: #000;
		font-weight: 700;
		// .left {
		// 	position: absolute;
		// 	left: 40rpx;
		// 	top: 50%;
		// 	transform: translateY(-50%);
		// }
	}
	
	// 轮播图
	.banner_box {
		position: relative;
		width: 100%;
		.swiper_option{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 80rpx;
			z-index: 999;
			display: flex;
			justify-content: center;
			align-items: center;
			.icon{
				display: inline-block;
				width: 12rpx;
				height: 12rpx;
				background: #ebebeb;
				border-radius: 12rpx;
				margin-right: 12rpx;
				&:last-child{
					margin-right: 0;
				}
			}
			.active_icon{
				width: 30rpx;
				transition: 0.5s all ;
			}
		}
	}
	.banner {
		width: 100%;
		height: 506rpx;
		.swiper_item {
			position: relative;
			width: 100%;
			height: 506rpx;
			.image {
				width: 100%;
				height: 506rpx;
			}
		}
	}
	.quick_box{
		display: flex;
		padding:20rpx 20rpx 0;
		box-sizing: border-box;
		width: 100%;
		justify-content: space-between;
		flex-wrap: wrap;
		.row{
			flex:25%;
			padding-top:48rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image{
				width: 108rpx;
				height: 108rpx;
				margin-bottom: 24rpx;
				border-radius: 50%;
				
			}
			text{
				color:#26252B;
				line-height: 36rpx;
				font-size: 26rpx;
			}
		}
	}
	.classification_box{
		padding: 0 36rpx;
		box-sizing: border-box;
		width: 100%;
		.tab_row2{
			padding: 30rpx 0 15rpx;
			width: 100%;
		}
	}
	
	
</style>
